tag is returned as JavaScript function to the render function
...
Component {
render()
{
return(

{'Welcome to React
world!'}

)
} }
� Back to Top
4
...
Elements can
11

contain other Elements in their props
...

Once an element is created, it is never mutated
...
createElement(
'div',
{id: 'login-btn'},
'Login'
)
The above React
...
render():

Login

Whereas a component can be declared in several different ways
...

In either case, it takes props as an input, and returns a JSX tree as the
output:
const Button = ({ onLogin }) =>

Login

Then JSX gets transpiled to a React
...
createElement(
'div',
{ id: 'login-btn', onClick: onLogin },
'Login'
)
� Back to Top
5
...

1
...
Those are pure JavaScript functions that accept props object
as the first parameter and return React elements:

12

“jsx harmony function Greeting({ message }) {

{Hello, ${message}‘}

return

} “‘
2
...
The above function component can be written as:
jsx harmony
render() {
} }

class Greeting extends React
...
props
...

When to use a Class Component over a Function Component?
If the component needs state or lifecycle methods then use class component otherwise use function component
...
8 with
the addition of Hooks, you could use state , lifecycle methods and other
features that were only available in class component right in your function
component
...

What are Pure Components?
React
...
Component except
that it handles the shouldComponentUpdate() method for you
...
Component on the other hand won’t compare current props and state to next out of the box
...

� Back to Top
8
...
We should always try to make
our state as simple as possible and minimize the number of stateful components
...
Component { constructor(props)
{ super(props)
this
...
state
...
e
...

� Back to Top
9
...
They are single values or objects containing a set of values that are passed to components on creation using a
naming convention similar to HTML-tag attributes
...


14

The primary purpose of props in React is to provide following component
functionality:
1
...

2
...

3
...
props
...

For example, let us create an element with reactProp property:
jsx harmony



This reactProp (or whatever you came up with) name then becomes a
property attached to React’s native props object which originally already
exists on all components created using React library
...
reactProp
� Back to Top
10
...
While both of them
hold information that influences the output of render, they are different
in their functionality with respect to component
...

� Back to Top
11
...

//Wrong
this
...
message = 'Hello world'
Instead use setState() method
...
When state changes, the component responds by rerendering
...
setState({ message: 'Hello World' })
Note: You can directly assign to the state object either in constructor or
using latest javascript’s class field declaration syntax
...

What is the purpose of callback function as an argument of
setState()?
The callback function is invoked when setState finished and the component
gets rendered
...

Note: It is recommended to use lifecycle method rather than this callback
function
...
log('The name has updated and component re-ren
� Back to Top
13
...
In HTML, the event name usually represents in lowercase as a convention:

Whereas in React it follows camelCase convention:
jsx harmony



2
...
log("The link was clicked
...
preventDefault()
console
...
')
}
3
...
(refer
“activateLasers” function in the first point for example)
� Back to Top
14
...
Binding in Constructor: In JavaScript classes, the methods are
not bound by default
...
Normally we bind them in constructor
...
handleClick = this
...
bind(this);
}
handleClick() {
console
...
handleClick}>Click Me;
}
}
2
...

jsx harmony
is:', this)

handleClick = () => {
}

console
...
handleClick}>
me'}

{'Click

3
...

jsx harmony handleClick() {
console
...
handleClick()}>Click Me; }
Note: If the callback is passed as prop to child components, those components might do an extra re-rendering
...
bind() or public class fields syntax approach considering performance
...

How to pass a parameter to an event handler or callback?
You can use an arrow function to wrap around an event handler and pass
parameters:

17

jsx harmony this
...
bind:
jsx harmony ...
bind(this,
id)} /> Apart from these two approaches, you can also pass arguments
to a function which is defined as arrow function jsx harmony onClick={this
...
log("Hello, your ticket number is", id) };
� Back to Top
16
...
Its API is same as the browser’s native event, including
stopPropagation() and preventDefault(), except the events work identically across all browsers
...

What are inline conditional expressions?
You can use either if statements or ternary expressions which are available
from JS to conditionally render expressions
...

jsx harmony

Hello!

{
!isLogin?

unread messages
...


messages
...
length}
:

You

}

� Back to Top
18
...
Key prop helps React identify which items have changed, are
added, or are removed
...
map((todo) =>
key={todo
...
text}
)
18


When you don’t have stable IDs for rendered items, you may use the item
index as a key as a last resort:
jsx harmony const todoItems = todos
...
text}
)
Note:
1
...
This can negatively impact performance and may cause
issues with component state
...
If you extract list item as separate component then apply keys on list
component instead of li tag
...
There will be a warning message in the console if the key prop is not
present on list items
...

What is the use of refs?
The ref is used to return a reference to the element
...

� Back to Top
20
...
This is a recently added approach
...
createRef() method and attached to React elements via the
ref attribute
...

jsx harmony class MyComponent extends React
...
myRef
= React
...
myRef} />
} }
2
...

For example, the search bar component’s input element is accessed as
follows, jsx harmony
class SearchBar extends Component
{
constructor(props) {
super(props);
this
...
state = { term: ''
};
this
...
txtSearch
= e;
}
}
onInputChange(event) {

19

this
...
txtSearch
...
onInputChange
...
state
ref={this
...
Note: You
can also use inline ref callbacks even though it is not a recommended
approach
...

What are forward refs?
Ref forwarding is a feature that lets some components take a ref they
receive, and pass it further down to a child
...
forwardRef((props, ref) =>
( {props
...
createRef(); {‘Forward Ref’} “‘
� Back to Top
22
...
Because
findDOMNode() prevents certain improvements in React in the future
...
scrollIntoView()
}
render() {
return

}
}
The recommended approach is:
class MyComponent extends Component {
constructor(props){
super(props);
this
...
node
...
scrollIntoView();
}
render() {
return

...

Why are String Refs legacy?
If you worked with React before, you might be familiar with an older
API where the ref attribute is a string, like ref={'textInput'}, and the
DOM node is accessed as this
...
textInput
...
String
refs were removed in React v16
...
They force React to keep track of currently executing component
...

2
...
Callback refs are perfectly
composable
...
They don’t work with static analysis like Flow
...
refs, as well as its type (which could be different)
...

4
...
g
...
Ref
will get attached to DataTable rather than MyComponent: return
;
// This would work though! Callback refs are awesome
...


21

What is Virtual DOM?
The Virtual DOM (VDOM) is an in-memory representation of Real DOM
...
It’s a step that happens between the render function being called
and the displaying of elements on the screen
...

� Back to Top
25
...

1
...


Figure 2: vdom
2
...

3
...

� Back to Top
26
...
The Virtual DOM is a concept
implemented by libraries in JavaScript on top of browser APIs
...

22

Figure 3: vdom2

Figure 4: vdom3

23

What is React Fiber?
Fiber is the new reconciliation engine or reimplementation of core algorithm in React v16
...

� Back to Top
28
...
Its headline feature is incremental rendering: the
ability to split rendering work into chunks and spread it out over multiple
frames
...
Ability to split interruptible work in chunks
...
Ability to prioritize, rebase and reuse work in progress
...
Ability to yield back and forth between parents and children to support layout in React
...
Ability to return multiple elements from render()
...
Better support for error boundaries
...

What are controlled components?
A component that controls the input elements within the forms on subsequent user input is called Controlled Component, i
...

For example, to write all the names in uppercase letters, we use handleChange as below,
handleChange(event) {
this
...
target
...
toUpperCase()})
}
� Back to Top
30
...
This is a bit more like traditional HTML
...

“‘jsx harmony class UserProfile extends React
...
handleSubmit = this
...
bind(this)
this
...
createRef() }
handleSubmit(event) { alert(‘A name was submitted:’ + this
...
current
...
preventDefault() }
render() { return (
{‘Name:’}
);
} } “‘
In most cases, it’s recommend to use controlled components to implement
forms
...
The alternative is uncontrolled components, where form data is
handled by the DOM itself
...

What is the difference between createElement and cloneElement?
JSX elements will be transpiled to React
...
Whereas cloneElement is used to clone an element and pass
it new props
...

What is Lifting State Up in React?
When several components need to share the same changing data then it is
recommended to lift the shared state up to their closest common ancestor
...

� Back to Top

25

33
...
Mounting: The component is ready to mount in the browser
DOM
...

2
...

This phase covers getDerivedStateFromProps(), shouldComponentUpdate(),
render(), getSnapshotBeforeUpdate() and componentDidUpdate()
lifecycle methods
...
Unmounting: In this last phase, the component is not needed
and gets unmounted from the browser DOM
...

It’s worth mentioning that React internally has a concept of phases when
applying changes to the DOM
...
Render The component will render without any side effects
...

2
...

3
...

React 16
...
3
� Back to Top
34
...
3
• componentWillMount: Executed before rendering and is used for
App level configuration in your root component
...
4+

Figure 6: phases 16
...

• componentWillReceiveProps: Executed when particular prop
updates to trigger state transitions
...
By default it returns true
...
It is a great place to improve performance
as it allows you to prevent a re-render if component receives new prop
...

• componentDidUpdate: Mostly it is used to update the DOM in
response to prop or state changes
...

React 16
...
This exists for rare use
cases where you need a derived state
...

• componentDidMount: Executed after first rendering and where
all AJAX requests, DOM or state updates, and set up event listeners
should occur
...
By default, it returns true
...
It is a great place to improve
performance as it allows you to prevent a re-render if component
receives a new prop
...
Any value returned by this will be
passed into componentDidUpdate()
...
e
...

• componentDidUpdate: Mostly it is used to update the DOM
in response to prop or state changes
...

• componentWillUnmount It will be used to cancel any outgoing
network requests, or remove all event listeners associated with the
component
...

28

What are Higher-Order Components?
A higher-order component (HOC) is a function that takes a component
and returns a new component
...

We call them pure components because they can accept any dynamically
provided child component but they won’t modify or copy any behavior
from their input components
...

2
...

4
...

Render hijacking
...

Props manipulation
...

How to create props proxy for HOC component?
You can add/edit props passed to the component using props proxy pattern
like this:
“‘jsx harmony function HOC(WrappedComponent) { return class Test extends Component { render() { const newProps = { title: ‘New Header’,
footer: false, showFeatureX: false, showFeatureY: true }
return ...
props} {
...

What is context?
Context provides a way to pass data through the component tree without
having to pass props down manually at every level
...

const {Provider, Consumer} = React
...


29

What is children prop?
Children is a prop (this
...
children) that allows you to pass components as data to other components, just like any other prop you use
...

There are several methods available in the React API to work with this
prop
...
Children
...
Children
...
Children
...
Children
...
Children
...

A simple usage of children prop looks as below,
“‘jsx harmony const MyDiv = React
...
props
...
render( {‘Hello’} {‘World’} , node ) “‘
� Back to Top
39
...

Single-line comments:
jsx harmony

{/* Single-line comments(In vanilla
JavaScript, the single-line comments are represented by
double slash(//)) */}
{`Welcome ${user}, let's play React`}

Multi-line comments:
jsx harmony

{/* Multi-line comments for more than
one line */}
{`Welcome ${user}, let's play React`}

� Back to Top
40
...
The same applies to ES6 sub-classes as
well
...
props in your child constructors
...
Component {
constructor(props) {
super(props)
console
...
props) // prints { name: 'John', age: 42 }
}
}
Not passing props:
class MyComponent extends React
...
log(this
...
log(props) // prints { name: 'John', age: 42 }
}
render() {
// no difference outside constructor
console
...
props) // prints { name: 'John', age: 42 }
}
}
The above code snippets reveals that this
...
It would be the same outside the constructor
...

What is reconciliation?
When a component’s props or state change, React decides whether an
actual DOM update is necessary by comparing the newly returned element
with the previously rendered one
...
This process is called reconciliation
...

How to set state with a dynamic key name?
If you are using ES6 or the Babel transpiler to transform your JSX code
then you can accomplish this with computed property names
...
setState({ [event
...
id]: event
...
value })
}
� Back to Top
43
...


jsx harmony render() {
// Wrong: handleClick is called
instead of passed as a reference!
return

...
handleClick}>{'Click
Me'} }
� Back to Top
44
...
lazy function supports default exports only
...

It also ensures that tree shaking keeps working and don’t pull unused components
...
js
export const SomeComponent = /*
...
*/; and reexport MoreComponents
...
js javascript
// IntermediateComponent
...
/MoreComponents
...
/IntermediateComponent
...


32

Why React uses className over class attribute?
class is a keyword in JavaScript, and JSX is an extension of JavaScript
...

Pass a string as the className prop
...

What are fragments?
It’s a common pattern in React which is used for a component to return
multiple elements
...

jsx harmony render() {
return (
...
Fragment>
) }
There is also a shorter syntax, but it’s not supported in many tools:
jsx harmony render() {
return (




<>
) }



� Back to Top
47
...
Fragments are a bit faster and use less memory by not creating an
extra DOM node
...

2
...

3
...

� Back to Top
48
...


33

ReactDOM
...
The second argument is a DOM element
...

What are stateless components?
If the behaviour is independent of its state then it can be a stateless component
...
But unless you need to use a lifecycle hook in your components, you should go for function components
...

� Back to Top
50
...
These stateful components
are always class components and have a state that gets initialized in the
constructor
...
state = { count: 0 }
}
render() {
//
...
8 Update:
Hooks let you use state and other React features without writing classes
...

How to apply validation on props in React?
When the application is running in development mode, React will automatically check all props that we set on components to make sure they
have correct type
...
It’s disabled in production mode due to performance
impact
...

The set of predefined prop types:
1
...

3
...

5
...

7
...

9
...


PropTypes
...
string
PropTypes
...
object
PropTypes
...
node
PropTypes
...
bool
PropTypes
...
any

We can define propTypes for User component as below:
“‘jsx harmony import React from ‘react’ import PropTypes from ‘proptypes’
class User extends React
...
string
...
number
...
props
...
props
...
5 *PropTypes* were moved from `React
...
propTypes = {
name: PropTypes
...
isRequired,
age: PropTypes
...
isRequired
}
� Back to Top
52
...

2
...

4
...

JSX makes code easy to read and write
...

Easy to integrate with frameworks (Angular, Backbone) since it is
only a view library
...
Easy to write unit and integration tests with tools such as Jest
...

What are the limitations of React?
Apart from the advantages, there are few limitations of React too,
1
...

2
...

3
...

4
...


36

5
...

� Back to Top
54
...

A class component becomes an error boundary if it defines a new
lifecycle method called componentDidCatch(error, info) or static
getDerivedStateFromError():
“‘jsx harmony class ErrorBoundary extends React
...
state = { hasError: false } }
componentDidCatch(error, info) { // You can also log the error to an error
reporting service logErrorToMyService(error, info) }
static getDerivedStateFromError(error) { // Update state so the next render will show the fallback UI
...
state
...
’}
}
return this
...
children
}}
After that use it as a regular component:
```jsx harmony



� Back to Top
55
...

It has been renamed to
componentDidCatch in React v16
...

What are the recommended ways for static type checking?
Normally we use PropTypes library (React
...
5) for type checking in the React
applications
...

� Back to Top
57
...
Most of the components are not required to
use this module
...

2
...

4
...


render()
hydrate()
unmountComponentAtNode()
findDOMNode()
createPortal()

� Back to Top
58
...
push(‘/new-location’) }} >
{‘Click Me!’} )} /> ) “‘

69

3
...

“‘jsx harmony const Button = (props, context) => ( type=‘button’ onClick={() => { context
...
push(‘/newlocation’) }} > {‘Click Me!’} )
Button
...
PropTypes
...
PropTypes
...
isRequired }) } “‘
� Back to Top
134
...
So the decision has been given to users to choose the
implementation they like
...

const queryString = require('query-string');
const parsed = queryString
...
location
...
location
...
get('name')
You should use a polyfill for IE11
...

Why you get “Router may have only one child element” warning?
You have to wrap your Route’s in a block because is
unique in that it renders a route exclusively
...
*/} />


...

70

How to pass params to history
...
props
...
push({
pathname: '/template',
search: '?name=sudheer',
state: { detail: response
...

� Back to Top
137
...
A with
no path always matches
...

How to get history on React Router v4?
Below are the list of steps to get history object on React Router v4,
1
...

For example, create history
...
You should use the component instead of built-in routers
...
js inside index
...
/history’ import App from ‘
...
render(( ), holder) “‘

71

3
...
js
import history from '
...
push('/go-here')
� Back to Top
139
...
Rendering a will navigate to a new location
...

import React, { Component } from 'react'
import { Redirect } from 'react-router'
export default class LoginComponent extends Component {
render() {
if (this
...
isLoggedIn === true) {
return
} else {
return

{'Login Please'}

}
}
}

React Internationalization
� Back to Top
140
...
React Intl is
part of FormatJS which provides bindings to React via its components
and API
...


72

What are the main features of React Intl?
Below are the main features of React Intl,
1
...

3
...

5
...

7
...

Display dates and times correctly
...

Pluralize labels in strings
...

Runs in the browser and Node
...


� Back to Top
142
...
Using react components:
jsx harmony id={'account'}
amount is less than minimum balance
...
Using an API:
const messages = defineMessages({
accountMessage: {
id: 'account',
defaultMessage: 'The amount is less than minimum balance
...
accountMessage)
� Back to Top
143
...
/> components from react-intl return elements,
not plain text, so they can’t be used for placeholders, alt text, etc
...
You can
inject the intl object into your component using injectIntl() higherorder component and then format the message using formatMessage()
available on that object
...
formatMessage({id: ‘messageId’}) return }
MyComponent
...
isRequired }
export default injectIntl(MyComponent) “‘
� Back to Top
144
...
locale}}
)
MyComponent
...
isRequired }
export default injectIntl(MyComponent) “‘
� Back to Top
145
...
The method is
used internally by instances of FormattedDate and it returns the string
representation of the formatted date
...
props
...
formatDate(date, { year: ‘numeric’,
month: ‘numeric’, day: ‘numeric’ })
const MyComponent = ({intl}) => (
{The formatted date is ${stringDate}}
)
MyComponent
...
isRequired }
export default injectIntl(MyComponent) “‘

74

React Testing
� Back to Top
146
...
It lets you
render a component one level deep and assert facts about what its render
method returns, without worrying about the behavior of child components,
which are not instantiated or rendered
...
render()
const result = renderer
...
type)
...
props
...
toEqual([

� Back to Top
147
...
This package makes it easy to grab a snapshot of the
platform view hierarchy (similar to a DOM tree) rendered by a ReactDOM
or React Native without using a browser or jsdom
...
create( {‘Facebook’} )

75

console
...
toJSON()) // { // type: ‘a’, // props: { href:
‘https://www
...
com/’ }, // children: [ ‘Facebook’ ] // } “‘
� Back to Top
148
...

� Back to Top
149
...

It’s often used for testing components
...

What are the advantages of Jest over Jasmine?
There are couple of advantages compared to Jasmine:
•
•
•
•

Automatically finds tests to execute in your source code
...

Allows you to test asynchronous code synchronously
...

• Runs tests in parallel processes so that they finish sooner
...

Give a simple example of Jest test case
Let’s write a test for a function that adds two numbers in sum
...
test
...
/sum'
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2))
...
json:
{
"scripts": {
"test": "jest"
}
}
Finally, run yarn test or npm test and Jest will print a result:
$ yarn test
PASS
...
test
...

What is flux?
Flux is an application design paradigm used as a replacement for the more
traditional MVC pattern
...
Facebook uses this pattern internally when working with
React
...

What is Redux?
Redux is a predictable state container for JavaScript apps based on the
Flux design pattern
...
It is tiny (about 2kB) and has no dependencies
...

What are the core principles of Redux?
Redux follows three fundamental principles:
1
...
The single state tree
makes it easier to keep track of changes over time and debug or
inspect the application
...
State is read-only: The only way to change the state is to emit
an action, an object describing what happened
...

3
...
Reducers
are just pure functions that take the previous state and an action as
parameters, and return the next state
...

What are the downsides of Redux compared to Flux?
Instead of saying downsides we can say that there are few compromises of
using Redux over Flux
...
You will need to learn to avoid mutations: Flux is unopinionated about mutating data, but Redux doesn’t like mutations
and many packages complementary to Redux assume you never
mutate the state
...
js, or instructing
your team to write non-mutating code
...
You’re going to have to carefully pick your packages: While
Flux explicitly doesn’t try to solve problems such as undo/redo, persistence, or forms, Redux has extension points such as middleware
and store enhancers, and it has spawned a rich ecosystem
...
There is no nice Flow integration yet: Flux currently lets you
do very impressive static type checks which Redux doesn’t support
yet
...

What is the difference
mapDispatchToProps()?

between

mapStateToProps()

and

mapStateToProps() is a utility which helps your component get updated
state (which is updated by some other components):
const mapStateToProps = (state) => {
return {
todos: getVisibleTodos(state
...
visibilityFilter)
}
}
mapDispatchToProps() is a utility which will help your component to fire
an action event (dispatching action which may cause change of application
state):
const mapDispatchToProps = (dispatch) => {
return {
onTodoClick: (id) => {
dispatch(toggleTodo(id))
}
}
}
It is recommended to always use the “object shorthand” form for the
mapDispatchToProps
...

const mapDispatchToProps = ({
onTodoClick
})
� Back to Top
157
...
Your reducer
should be without side effects, simply digesting the action payload and

79

returning a new state object
...

� Back to Top
158
...
Also, it shouldn’t pollute the global window object
...

What are the drawbacks of MVW pattern?
1
...

2
...

3
...

4
...

� Back to Top
160
...

Redux is a tool for managing state throughout the application
...
Think of it as an alternative to (half of)
Angular
...
It is usually used as
a tool to accomplish asynchronous tasks in JavaScript
...
Redux uses the Reactive paradigm because the
Store is reactive
...
RxJS also uses the Reactive paradigm, but instead of being an
architecture, it gives you basic building blocks, Observables, to accomplish
this pattern
...

How to dispatch an action on load?
You can dispatch an action in componentDidMount() method and in
render() method you can verify the data
...
props
...
props
...
isLoaded
})
const mapDispatchToProps = { fetchData }
export default connect(mapStateToProps, mapDispatchToProps)(App)
� Back to Top
162
...
Use mapStateToProps(): It maps the state variables from your store
to the props that you specify
...
Connect the above props to your container: The object returned by the mapStateToProps function is connected to the container
...

“‘jsx harmony import React from ‘react’ import { connect } from
‘react-redux’
class App extends React
...
props
...
data } }

{

return

{

containerData:

export default connect(mapStateToProps)(App) “‘
� Back to Top
163
...

For example, let us take rootReducer() to return the initial state after
USER_LOGOUT action
...

const appReducer = combineReducers({
/* your app's top-level reducers */
})
const rootReducer = (state, action) => {
if (action
...

redux-persist keeps a copy of your state in a storage engine
...

const appReducer = combineReducers({
/* your app's top-level reducers */
})
const rootReducer = (state, action) => {
if (action
...
keys(state)
...
removeItem(`persist:${key}`)
})
state = undefined
}

82

return appReducer(state, action)
}
� Back to Top
164
...
Decorators make it possible to annotate and modify classes and
properties at design time
...

• Without decorator:
import
import
import
import

React from 'react'
* as actionCreators from '
...
todos }
}
function mapDispatchToProps(dispatch) {
return { actions: bindActionCreators(actionCreators, dispatch) }
}
class MyApp extends React
...
define your main app here
}
export default connect(mapStateToProps, mapDispatchToProps)(MyApp)
• With decorator:
import
import
import
import

React from 'react'
* as actionCreators from '
...
todos }
}
function mapDispatchToProps(dispatch) {

83

return { actions: bindActionCreators(actionCreators, dispatch) }
}
@connect(mapStateToProps, mapDispatchToProps)
export default class MyApp extends React
...
define your main app here
}
The above examples are almost similar except the usage of decorator
...
You can use babel for the decorators
support
...

What is the difference between React context and React Redux?
You can use Context in your application directly and is going to be great
for passing down data to deeply nested components which what it was
designed for
...
Also, React Redux uses
context internally but it doesn’t expose this fact in the public API
...

Why are Redux state functions called reducers?
Reducers always return the accumulation of the state (based on all previous and current actions)
...
Each
time a Redux reducer is called, the state and action are passed as parameters
...
You could reduce a collection of actions
and an initial state (of the store) on which to perform these actions to get
the resulting final state
...

How to make AJAX request in Redux?
You can use redux-thunk middleware which allows you to define async
actions
...
status === 200) {
dispatch(setAccount(response
...

Should I keep all component’s state in Redux store?
Keep your data in the Redux store, and the UI related state internally in
the component
...

What is the proper way to access Redux store?
The best way to access your store in a component is to use the connect()
function, that creates a new component that wraps around your existing
one
...
This
allows you to map state and action creators to your component, and have
them passed in automatically as your store updates
...
/actions'
import Link from '
...
filter === state
...
filter))
})
const FilterLink = connect(
mapStateToProps,
mapDispatchToProps
)(Link)
export default FilterLink
Due to it having quite a few performance optimizations and generally
being less likely to cause bugs, the Redux developers almost always recommend using connect() over accessing the store directly (using context
API)
...
context
...

What is the difference between component and container in React Redux?
Component is a class or function component that describes the presentational part of your application
...
Containers subscribe to Redux state updates and dispatch
actions, and they usually don’t render DOM elements; they delegate rendering to presentational child components
...

What is the purpose of the constants in Redux?
Constants allows you to easily find all usages of that specific functionality across the project when you use an IDE
...

86

Normally we will save them in a single file (constants
...
js)
...
During action creation:
Let’s take actions
...
/actionTypes';
export function addTodo(text) {
return { type: ADD_TODO, text }
}
2
...
js:
import { ADD_TODO } from '
...
type) {
case ADD_TODO:
return [

...
text,
completed: false
}
];
default:
return state
}
}
� Back to Top
172
...

87

Below are the possible options:
const mapDispatchToProps = (dispatch) => ({
action: () => dispatch(action())
})
const mapDispatchToProps = (dispatch) => ({
action: bindActionCreators(action, dispatch)
})
const mapDispatchToProps = { action }
The third option is just a shorthand for the first one
...

What is the use of the ownProps parameter in mapStateToProps()
and mapDispatchToProps()?
If the ownProps parameter is specified, React Redux will pass the props
that were passed to the component into your connect functions
...
/containers/ConnectedComponent’;

The `ownProps` inside your `mapStateToProps()` and `mapDispatchToProps()` functions wil
```javascript
{ user: 'john' }
You can use this object to decide what to return from those functions
...

How to structure Redux top level directories?
Most of the applications has several top-level directories as below:
1
...

2
...

3
...

4
...

5
...

This structure works well for small and medium size apps
...

What is redux-saga?
redux-saga is a library that aims to make side effects (asynchronous
things like data fetching and impure things like accessing the browser
cache) in React/Redux applications easier and better
...

What is the mental model of redux-saga?
Saga is like a separate thread in your application, that’s solely responsible
for side effects
...

� Back to Top
177
...
call() function is
used to create effect description, which instructs middleware to call the
promise
...

Let’s take example of how these effects work for fetching particular user
data
...
fetchUser` fu
// Instructing middleware to call promise, it resolved value will be assigned to `use
const userData = yield call(api
...
userId)
// Instructing middleware to dispatch corresponding action
...

What is Redux Thunk?
Redux Thunk middleware allows you to write action creators that return
a function instead of an action
...
The
inner function receives the store methods dispatch() and getState() as
parameters
...

What are the differences between redux-saga and redux-thunk?
Both Redux Thunk and Redux Saga take care of dealing with side effects
...
Thunk is simple to use and Promises are familiar to
many developers, Sagas/Generators are more powerful but you will need
to learn them
...

� Back to Top
180
...
If you don’t want to
bother with installing Redux DevTools and integrating it into your project,
consider using Redux DevTools Extension for Chrome and Firefox
...

What are the features of Redux DevTools?
Some of the main features of Redux DevTools are below,
1
...

2
...

3
...

4
...


90

5
...

� Back to Top
182
...

For example, to get user details from the state:
const getUserData = state => state
...
data
These selectors have two main benefits,
1
...
The selector is not recomputed unless one of its arguments changes
� Back to Top
183
...
Redux Form can be used with raw
HTML5 inputs, but it also works very well with common UI frameworks
like Material UI, React Widgets and React Bootstrap
...

What are the main features of Redux Form?
Some of the main features of Redux Form are:
1
...

2
...

3
...

� Back to Top
185
...


91

For example, you can add redux-thunk and logger passing them as arguments to applyMiddleware():
import { createStore, applyMiddleware } from 'redux'
const createStoreWithMiddleware = applyMiddleware(ReduxThunk, logger)(createStore)
� Back to Top
186
...

How Relay is different from Redux?
Relay is similar to Redux in that they both use a single store
...
Relay caches the data for you and
optimizes data fetching for you, by fetching only changed data and nothing
more
...

What is an action in Redux?
Actions are plain JavaScript objects or payloads of information that send
data from your application to your store
...
Actions must have a type property that indicates
the type of action being performed
...

What is the difference between React Native and React?
React is a JavaScript library, supporting both front end web and being
run on the server, for building user interfaces and web applications
...

� Back to Top
189
...

You can run the app in your mobile using expo app (https://expo
...

� Back to Top
190
...
log, console
...
As of React Native v0
...


93

How to debug your React Native?
Follow the below steps to debug React Native app:
1
...

2
...

3
...

4
...

5
...


React supported libraries & Integration
� Back to Top
192
...
It was originally written to compute derived data from Redux-like
applications state, but it can’t be tied to any architecture or library
...
If the the same
inputs are provided twice in a row, Reselect returns the cached output
...

� Back to Top
193
...

Flow types can express much more fine-grained distinctions than traditional type systems
...

� Back to Top
194
...


94

PropTypes is a basic type checker (runtime checker) which has been
patched onto React
...
If you want more flexible
typechecking for your entire project Flow/TypeScript are appropriate
choices
...

How to use Font Awesome icons in React?
The below steps followed to include Font Awesome in React:
1
...
Import font-awesome in your index
...
min
...
Add Font Awesome classes in className:
render() {
return

}
� Back to Top
196
...
It exists both as a browser extension (for
Chrome and Firefox), and as a standalone app (works with other environments including Safari, IE, and React Native)
...

1
...
Firefox extension
3
...

Why is DevTools not loading in Chrome for local files?
If you opened a local HTML file in your browser (file://
...

95

� Back to Top
198
...
Create a Polymer element:
jsx harmony /> Polymer({
is: 'calender-element',
ready:
function() {
this
...
Create the Polymer component HTML tag by importing it in a
HTML document, e
...
import it in the index
...
/src/polymer-components/calender-element
...
Use that element in the JSX file:
import React from 'react'
class MyComponent extends React
...

What are the advantages of React over Vue
...
js:
1
...

3
...


Gives more flexibility in large apps developing
...

Suitable for mobile apps creating
...


Note: The above list of advantages are purely opinionated and it vary based
on the professional experience
...

� Back to Top

96

200
...

React

Angular

React is a library and has only
the View layer
React handles rendering on
the server side

Angular is a framework and has complete
MVC functionality
AngularJS renders only on the client side
but Angular 2 and above renders on the
server side
Angular follows the template approach for
HTML, which makes code shorter and easy
to understand
Ionic, Angular’s mobile native app is
relatively less stable and slower

React uses JSX that looks like
HTML in JS which can be
confusing
React Native, which is a React
type to build mobile
applications are faster and
more stable
In React, data flows only in
one way and hence debugging
is easy

In Angular, data flows both way i
...
But they are helpful as base parameters
...

Why React tab is not showing up in DevTools?
When the page loads, React DevTools sets a global named __REACT_DEVTOOLS_GLOBAL_HOOK__,
then React communicates with that hook during initialization
...

� Back to Top
202
...

It removes the mapping between styles and components, and lets you write
actual CSS augmented with JavaScript
...

Give an example of Styled Components?
Lets create